<template>
    <div class="container">
        <div class="title">
            <div class="text">静夜思</div>
            <div @click="toggle">{{ isExpanded ? '收起' : '展开'}}</div>
        </div>
        <div :class="`content ${ isExpanded ? '' : 'hide'}`">
            <div>床前明月光</div>
            <div>疑是地上霜</div>
            <div>举头望明月</div>
            <div>低头思故乡</div>
        </div>
    </div>
   
</template>

<script>
export default {
	data() {
		return {
			isExpanded: true,
		};
	},
    methods: {
        toggle () {
            this.isExpanded = !this.isExpanded;
        }
    }
};
</script>
<style scoped>
    .container {
        width: 200px;
        outline: 1px solid red;

    }
    .title {
        width: 100%;
        height: 30px;
        border-bottom: 1px solid red;
        font-weight: 900;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .content {
        height: 120px;
        transition: height 1s ease;
        overflow: hidden;
    }
    .content.hide {
        height: 0;
    }
    
</style>